Plokiahela nutilepingu sündmuste kuulaja esirakenduses: lepingu oleku jälgimine

Detsentraliseeritud rakendused (DAppid) nõuavad sageli reaalajas uuendusi, et kajastada aluseks oleva nutilepingu oleku muutusi. Siin tulevadki mängu sündmuste kuulajad. Jälgides nutilepingute poolt väljastatavaid sündmusi, saavad esirakendused reageerida olekumuutustele ja pakkuda kasutajatele ajakohast teavet. See juhend annab põhjaliku ülevaate esirakenduse sündmuste kuulaja loomisest plokiahela nutilepingutele, keskendudes praktilisele rakendamisele ja parimatele tavadele.

Mis on nutilepingu sündmused?

Nutilepingud, mis on kirjutatud keeltes nagu Solidity, saavad väljastada sündmusi, kui lepingus toimuvad teatud tegevused. Need sündmused toimivad teavitusmehhanismina, andes välistele rakendustele märku, et olekumuutus on toimunud. Mõelge neist kui logikirjetest, mis salvestatakse püsivalt plokiahelasse. Sündmused sisaldavad teavet muutuse kohta, võimaldades rakendustel vastavalt reageerida.

Näiteks, kujutage ette lihtsat token'i lepingut. See võib väljastada sündmuse, kui token'eid kantakse üle kontode vahel. See sündmus sisaldaks tavaliselt saatja aadressi, saaja aadressi ja ülekantud summat. Esirakendus saaks seda sündmust kuulata ja uuendada kasutaja saldot reaalajas.

Miks kasutada sündmuste kuulajaid?

Plokiahela pidev pärimine olekumuutuste kohta on ebaefektiivne ja ressursimahukas. Sündmuste kuulajad pakuvad elegantsemat ja tõhusamat lahendust, võimaldades rakendustel passiivselt teavitusi oodata. See vähendab plokiahela koormust ja parandab DAppi reageerimisvõimet.

Sündmuste kuulajate kasutamise peamised eelised on järgmised:

• Reaalajas uuendused: Pakkuge kasutajatele kohest tagasisidet lepingu oleku muutuste kohta.
• Parem tõhusus: Vähendage vajadust plokiahela pideva pärimise järele.
• Parem kasutajakogemus: Looge dünaamilisem ja reageerimisvõimelisem rakendus.
• Vähendatud gaasikulud: Vältige mittevajalikke lugemisoperatsioone plokiahelas.

Tööriistad ja tehnoloogiad

Esirakenduse sündmuste kuulajate loomiseks saab kasutada mitmeid tööriistu ja teeke. Populaarseimad valikud on järgmised:

• Web3.js: JavaScripti teek, mis võimaldab suhelda Ethereumi sõlmede ja nutilepingutega. See pakub laiaulatuslikku API-d plokiahela andmetele juurdepääsuks, tehingute saatmiseks ja sündmuste kuulamiseks.
• Ethers.js: Teine populaarne JavaScripti teek Ethereumi'ga suhtlemiseks. See on tuntud oma lihtsuse, turvalisuse ja jõudluse poolest.
• Infura/Alchemy: Infrastruktuuri pakkujad, mis pakuvad usaldusväärset juurdepääsu Ethereumi võrgule. Nad pakuvad API-sid plokiahela andmete lugemiseks ja tehingute saatmiseks, kaotades vajaduse pidada oma Ethereumi sõlme.
• WebSockets: Kommunikatsiooniprotokoll, mis võimaldab reaalajas kahesuunalist suhtlust kliendi ja serveri vahel. WebSockets'i kasutatakse sageli sündmuste teadete edastamiseks esirakendusele.

Esirakenduse sündmuste kuulaja loomine: samm-sammuline juhend

See jaotis kirjeldab samme, mis on vajalikud esirakenduse sündmuste kuulaja loomiseks, kasutades Web3.js-i või ethers.js-i.

1. samm: Arenduskeskkonna seadistamine

Enne alustamist veenduge, et teil on installitud järgmised vahendid:

• Node.js: JavaScripti käivituskeskkond.
• npm (Node Package Manager) või yarn: Paketihaldur sõltuvuste installimiseks.
• Koodiredaktor: Visual Studio Code, Sublime Text või mõni muu eelistatud redaktor.

Looge uus projektikataloog ja lähtestage see npm-i või yarn-iga:

            mkdir my-dapp
cd my-dapp
npm init -y

            

              
                Copy
              
            
          

Või kasutades yarn'i:

            mkdir my-dapp
cd my-dapp
yarn init -y

            

              
                Copy
              
            
          

2. samm: Sõltuvuste installimine

Installige Web3.js või ethers.js koos kõigi muude vajalike sõltuvustega. Näiteks võib teil vaja minna teeki keskkonnamuutujate haldamiseks.

Kasutades npm-i:

            npm install web3 dotenv

            

              
                Copy
              
            
          

Kasutades yarn'i:

            yarn add web3 dotenv

            

              
                Copy
              
            
          

Või ethers.js jaoks:

Kasutades npm-i:

            npm install ethers dotenv

            

              
                Copy
              
            
          

Kasutades yarn'i:

            yarn add ethers dotenv

            

              
                Copy
              
            
          

3. samm: Web3 pakkuja konfigureerimine

Ethereumi võrguga ühenduse loomiseks peate konfigureerima Web3 pakkuja. Seda saab teha kasutades Infurat, Alchemyt või kohalikku Ethereumi sõlme (nagu Ganache).

Looge oma projektikataloogi fail nimega `.env` ja lisage sinna oma Infura või Alchemy API võti:

            INFURA_API_KEY=YOUR_INFURA_API_KEY

            

              
                Copy
              
            
          

Seejärel konfigureerige oma JavaScripti failis Web3 pakkuja:

Kasutades Web3.js-i:

            require('dotenv').config();
const Web3 = require('web3');

const infuraApiKey = process.env.INFURA_API_KEY;
const web3 = new Web3(new Web3.providers.WebsocketProvider(`wss://mainnet.infura.io/ws/v3/${infuraApiKey}`));

            

              
                Copy
              
            
          

Kasutades ethers.js-i:

            require('dotenv').config();
const { ethers } = require('ethers');

const infuraApiKey = process.env.INFURA_API_KEY;
const provider = new ethers.providers.WebSocketProvider(`wss://mainnet.infura.io/ws/v3/${infuraApiKey}`);

            

              
                Copy
              
            
          

Märkus: Asendage `mainnet` sobiva võrguga (nt `ropsten`, `rinkeby`, `goerli`), kui kasutate testvõrku.

4. samm: Lepingu ABI ja aadressi hankimine

Oma nutilepinguga suhtlemiseks vajate selle rakenduse binaarset liidest (ABI) ja aadressi. ABI on JSON-fail, mis kirjeldab lepingu funktsioone ja sündmusi. Aadress on lepingu asukoht plokiahelas.

ABI saate oma Solidity kompilaatori väljundist. Aadress kuvatakse pärast lepingu kasutuselevõttu.

Salvestage ABI JSON-faili (nt `MyContract.json`) ja aadress oma `.env` faili:

            CONTRACT_ADDRESS=0xYourContractAddress...

            

              
                Copy
              
            
          

5. samm: Lepingu instantsi loomine

Kasutades ABI-d ja aadressi, looge oma JavaScripti failis lepingu instants:

Kasutades Web3.js-i:

            const contractAddress = process.env.CONTRACT_ADDRESS;
const contractABI = require('./MyContract.json').abi;
const myContract = new web3.eth.Contract(contractABI, contractAddress);

            

              
                Copy
              
            
          

Kasutades ethers.js-i:

            const contractAddress = process.env.CONTRACT_ADDRESS;
const contractABI = require('./MyContract.json').abi;
const myContract = new ethers.Contract(contractAddress, contractABI, provider);

            

              
                Copy
              
            
          

6. samm: Sündmuste kuulamine

Nüüd saate hakata kuulama oma nutilepingu poolt väljastatud sündmusi. Kasutage sündmuste tellimiseks oma lepingu instantsi `events` omadust.

Kasutades Web3.js-i:

            myContract.events.MyEvent({
    filter: {myIndexedParam: [20,23]}, // Valikuline filter, kasutades indekseeritud parameetreid.
    fromBlock: 'latest'             // Alusta kuulamist uusimast plokist.
}, function(error, event){
    if(!error)
    {console.log(event);}
    else
    {console.log(error);}
})
.on('data', function(event){
    console.log(event);
})
.on('changed', function(event){
    // eemalda sündmus kohalikust andmebaasist
})
.on('error', console.error);

            

              
                Copy
              
            
          

Või kasutades async/await:

            myContract.events.MyEvent({
    filter: {myIndexedParam: [20,23]}, // Valikuline filter, kasutades indekseeritud parameetreid.
    fromBlock: 'latest'             // Alusta kuulamist uusimast plokist.
})
.on('data', async function(event){
    console.log(event);
    // Töötle sündmuse andmeid siin, nt uuenda kasutajaliidest
    try {
        // Näide: suhtle oma DAppi teise osaga.
        // await someOtherFunction(event.returnValues);
    } catch (error) {
        console.error("Error processing event:", error);
    }
})
.on('changed', function(event){
    // eemalda sündmus kohalikust andmebaasist
})
.on('error', console.error);

            

              
                Copy
              
            
          

Kasutades ethers.js-i:

            myContract.on("MyEvent", (param1, param2, event) => {
    console.log("Sündmus MyEvent väljastati!");
    console.log("Parameeter 1:", param1);
    console.log("Parameeter 2:", param2);
    console.log("Sündmuse andmed:", event);

    // Töötle sündmuse andmeid siin, nt uuenda kasutajaliidest
});

            

              
                Copy
              
            
          

Mõlemas näites asendage `MyEvent` selle sündmuse nimega, mida soovite kuulata. Tagasikutsefunktsioon käivitatakse iga kord, kui sündmus väljastatakse. Sündmuse andmetele pääsete juurde `event` objekti kaudu.

7. samm: Sündmuste andmete käsitlemine

`event` objekt sisaldab teavet sündmuse kohta, sealhulgas sellele edastatud argumente, ploki numbrit ja tehingu räsi. Saate neid andmeid kasutada oma rakenduse kasutajaliidese uuendamiseks või muude toimingute tegemiseks.

Näiteks, kui teie sündmus sisaldab kasutaja saldot, saate esirakenduses saldo kuva uuendada:

            // Sündmuse käsitleja sees
const balance = event.returnValues.balance; // Web3.js
// Või
// const balance = param1; // ethers.js, eeldades, et param1 on saldo

document.getElementById('balance').textContent = balance;

            

              
                Copy
              
            
          

Täpsemad sündmuste kuulamise tehnikad

See jaotis uurib mõningaid täpsemaid tehnikaid keerukamate sündmuste kuulajate loomiseks.

Sündmuste filtreerimine

Saate sündmusi filtreerida kindlate kriteeriumide alusel, näiteks indekseeritud parameetri väärtuse järgi. See aitab teil kitsendada sündmusi, millest olete huvitatud, ja vähendada andmemahtu, mida peate töötlema.

Web3.js-is saate sündmuste tellimisel kasutada `filter` valikut:

            myContract.events.MyEvent({
    filter: {myIndexedParam: [20, 23]}, // Kuula ainult sündmusi, kus myIndexedParam on 20 või 23.
    fromBlock: 'latest'
}, function(error, event){
    console.log(event);
})

            

              
                Copy
              
            
          

Ethers.js-is saate filtreid määrata lepingu instantsi loomisel või sündmuse kuulaja lisamisel:

            // Filtreeri sündmuse nime ja indekseeritud argumentide järgi
const filter = myContract.filters.MyEvent(arg1, arg2);

myContract.on(filter, (arg1, arg2, event) => {
    console.log("Sündmus MyEvent väljastati kindlate argumentidega!");
    console.log("Arg1:", arg1);
    console.log("Arg2:", arg2);
    console.log("Sündmuse andmed:", event);
});

            

              
                Copy
              
            
          

Varasemate sündmuste kuulamine

Saate hankida varasemaid sündmusi, mis toimusid enne, kui teie sündmuste kuulaja oli aktiivne. See võib olla kasulik rakenduse oleku lähtestamiseks või auditeerimise eesmärgil.

Web3.js-is saate kasutada meetodit `getPastEvents`:

            myContract.getPastEvents('MyEvent', {
    fromBlock: 0,
    toBlock: 'latest'
}, function(error, events){
    console.log(events);
});

            

              
                Copy
              
            
          

Ethers.js-is saate sündmuste logisid pärida, kasutades pakkuja meetodit `getLogs`:

            const blockNumber = await provider.getBlockNumber();
const filter = myContract.filters.MyEvent(arg1, arg2);
const logs = await provider.getLogs({
    address: myContract.address,
    fromBlock: blockNumber - 1000, // viimased 1000 plokki
    toBlock: blockNumber,
    topics: filter.topics // filtri teemad
});

for (const log of logs) {
    const parsedLog = myContract.interface.parseLog(log);
    console.log(parsedLog);
}

            

              
                Copy
              
            
          

Tagasi lükatud tehingute käsitlemine

Tehingud võivad mõnikord vigade või ebapiisava gaasi tõttu tagasi lükata. Kui tehing lükatakse tagasi, siis selle tehinguga seotud sündmusi ei väljastata. On oluline tagasi lükatud tehinguid graatsiliselt käsitleda, et vältida ootamatut käitumist oma rakenduses.

Üks viis tagasi lükatud tehingute käsitlemiseks on jälgida tehingu kviitungit. Kviitung sisaldab teavet tehingu kohta, sealhulgas selle staatust (õnnestunud või ebaõnnestunud). Kui staatus on `0x0`, lükati tehing tagasi.

Tehingu kviitungi saamiseks võite kasutada meetodit `web3.eth.getTransactionReceipt` (Web3.js) või `provider.getTransactionReceipt` (ethers.js).

WebSockets'i kasutamine reaalajas uuenduste jaoks

WebSockets pakub püsivat ühendust kliendi ja serveri vahel, võimaldades reaalajas kahesuunalist suhtlust. See on ideaalne sündmuste teadete edastamiseks esirakendusele.

Nii Web3.js kui ka ethers.js toetavad WebSockets'i. WebSockets'i kasutamiseks konfigureerige oma Web3 pakkuja WebSocketi lõpp-punktiga (nagu näidatud ülaltoodud seadistusnäidetes).

Turvalisuse kaalutlused

Esirakenduse sündmuste kuulajate loomisel on oluline arvestada järgmiste turvaaspektidega:

• Andmete valideerimine: Valideerige alati sündmuste andmeid enne nende kasutamist oma rakenduses. Ärge usaldage pimesi plokiahelast saadud andmeid.
• Vigade käsitlemine: Rakendage robustne vigade käsitlemine, et vältida ootamatut käitumist ja potentsiaalseid turvaauke.
• Päringute piiramine: Rakendage päringute piiramine, et vältida kuritarvitamist ja kaitsta oma rakendust teenusetõkestamise rünnakute eest.
• Sõltuvuste haldamine: Hoidke oma sõltuvused ajakohasena, et parandada turvaauke.
• Kasutaja sisendi puhastamine: Kui kuvate kasutajatele sündmuste andmeid, puhastage andmed, et vältida saidiülest skriptimist (XSS) rünnakuid.

Parimad praktikad

Järgige neid parimaid praktikaid, et luua robustseid ja hooldatavaid esirakenduse sündmuste kuulajaid:

• Kasutage modulaarset arhitektuuri: Jaotage oma rakendus väiksemateks, korduvkasutatavateks komponentideks.
• Kirjutage ühikteste: Testige oma sündmuste kuulajaid põhjalikult, et tagada nende korrektne toimimine.
• Kasutage logimisraamistikku: Logige olulisi sündmusi ja vigu, et aidata teil oma rakendust siluda.
• Dokumenteerige oma kood: Dokumenteerige oma kood selgelt, et seda oleks lihtsam mõista ja hooldada.
• Järgige kodeerimiskonventsioone: Järgige järjepidevaid kodeerimiskonventsioone, et parandada loetavust ja hooldatavust.
• Jälgige oma rakendust: Jälgige oma rakenduse jõudlust ja ressursikasutust, et tuvastada potentsiaalseid kitsaskohti.

Näidisstsenaarium: token'i ülekande jälgimine

Vaatleme praktilist näidet: token'ite ülekannete jälgimine lihtsas ERC-20 token'i lepingus.

ERC-20 standard sisaldab `Transfer` sündmust, mis väljastatakse iga kord, kui token'eid kantakse üle kontode vahel. See sündmus sisaldab saatja aadressi, saaja aadressi ja ülekantud summat.

Siin on, kuidas saate oma esirakenduses kuulata `Transfer` sündmusi:

Kasutades Web3.js-i:

            myContract.events.Transfer({
    fromBlock: 'latest'
}, function(error, event){
    if(!error)
    {
        console.log("Ülekande sündmus:", event);
        const from = event.returnValues.from;
        const to = event.returnValues.to;
        const value = event.returnValues.value;

        // Uuenda kasutajaliidest või soorita muid toiminguid
        console.log(`Token'id kanti üle ${from} aadressilt ${to} aadressile: ${value}`);
    }
    else
    {console.error(error);}
});

            

              
                Copy
              
            
          

Kasutades ethers.js-i:

            myContract.on("Transfer", (from, to, value, event) => {
    console.log("Ülekande sündmus väljastati!");
    console.log("Saatja:", from);
    console.log("Saaja:", to);
    console.log("Väärtus:", value.toString()); // Väärtus on ethers.js-is BigNumber
    console.log("Sündmuse andmed:", event);

    // Uuenda kasutajaliidest või soorita muid toiminguid
    console.log(`Token'id kanti üle ${from} aadressilt ${to} aadressile: ${value.toString()}`);
});

            

              
                Copy
              
            
          

See koodilõik kuulab `Transfer` sündmusi ja logib saatja aadressi, saaja aadressi ning ülekantud summa konsooli. Seejärel saate seda teavet kasutada oma rakenduse kasutajaliidese uuendamiseks, tehingute ajaloo kuvamiseks või muude toimingute tegemiseks.

Kokkuvõte

Esirakenduse plokiahela nutilepingu sündmuste kuulajad on võimas tööriist reaalajas reageerimisvõimeliste DAppide loomiseks. Jälgides nutilepingute poolt väljastatavaid sündmusi, saate pakkuda kasutajatele ajakohast teavet ja parandada üldist kasutajakogemust. See juhend on käsitlenud sündmuste kuulajate loomise põhimõisteid, tööriistu ja tehnikaid koos täpsemate teemadega, nagu sündmuste filtreerimine, tagasi lükatud tehingute käsitlemine ja WebSockets'i kasutamine reaalajas uuenduste jaoks. Järgides selles juhendis toodud parimaid praktikaid, saate luua robustseid ja turvalisi sündmuste kuulajaid, mis täiustavad teie DAppide funktsionaalsust ja kasutajakogemust.

Lisalugemist

• Web3.js dokumentatsioon
• Ethers.js dokumentatsioon
• Infura
• Alchemy
• Ethereumi nutilepingud